{%extends "base.html"%}
{%block title%}
注册
{%endblock%}
{%block body%}
<script>
    var register_frame;
    $(document).ready(() => {

        register_frame = new Vue({
            el: "#register-frame",
            delimiters: ['{[', ']}'],
            mixins: [baseMixin],
            data: {
                error_message: "",
                username: "",
                email: "",
                password: "",
                password2: ""
            },
            mounted() {
                if (this.base.isLogin) {
                    window.location.href = "/";
                    return;
                }
            },
            methods: {
                register: function () {
                    // console.log("Logining..");
                    this.error_message = "";
                    if (this.username == "" || this.email == "" || this.password == "") {
                        this.error_message = "请输入用户名或密码或邮箱";
                        return;
                    }
                    if (this.password != this.password2) {
                        this.error_message = "两次密码不一致";
                        return;
                    }
                    $.post("/api/register", {
                        username: register_frame.username, password: this.md5WithSalt(register_frame.password), email: register_frame.email
                    }).done(function (ctx) {
                        ctx = JSON.parse(ctx);
                        console.log(ctx);
                        if (ctx.code == 0) {
                            window.location.href = "/";
                        } else {
                            register_frame.error_message = ctx.message;
                        }

                    });
                }
            }
        });
    });

</script>
<div style="top:10%;max-width: 500px;">
    <div class="ui left aligned container">
        <div class="ui header">
            <h1>注册</h1>
        </div>
        <div class="ui stack segment">
            <div id="register-frame" class="ui form" v-bind:class="{error:error_message!=''}">
                <div class="ui field">
                    <label>用户名:</label>
                    <input type="text" placeholder="用户名.." v-model="username">
                </div>
                <div class="field">
                    <label>邮箱</label>
                    <input type="text" v-model="email" placeholder="邮箱..">
                </div>
                <div class="fields">
                    <div class="field">
                        <label>密码</label>
                        <input type="password" v-model="password" placeholder="密码..">
                    </div>
                    <div class="field">
                        <label>重复密码</label>
                        <input type="password" v-model="password2" v-on:keyup.enter="register">
                    </div>
                </div>
                <div class="ui error message">
                    <div class="header">错误</div>
                    <p>{[error_message]}</p>
                </div>
                <div class="ui green submit button" v-on:click="register">提交</div>
            </div>
        </div>
    </div>
</div>
{%endblock%}